<template>
  <div class="my-music music-cpns-common">
    <div class="news-tog">
      <div>
        <el-button
          :class="[isTog ? '' : 'active']"
          size="small"
          round
          @click="togList"
          >下载管理</el-button
        >
        <el-button
          :class="[isTog ? 'active' : '']"
          size="small"
          round
          @click="togAnchor"
          >本地音乐</el-button
        >
      </div>
    </div>
    <div class="songstable">
      <page-music-table
        :contentTableConfig="contentTableConfig"
        :dataList="songsList"
        :lookShow="false"
        :headerBtnShow="false"
        :propName="propName"
        @hanelDbPlay="hanelDbPlay"
      >
      </page-music-table>
      <div class="find" style="width: 180px; height: 40px">
        <el-input
          v-model="input"
          placeholder="请输入内容"
          size="mini"
          suffix-icon="el-icon-search"
        ></el-input>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
import PageMusicTable from '@/components/page-find-music/page-news-music/page-music-table'
import { contentTableConfig } from '../config/table-config'
import { defaultMusic } from '../config/defaultObj'

const isTog = ref(false)
const store = useStore()
const propName = { time: 'dt', artists: 'ar', album: 'al' }

const input = ref('')
const dwnMusic = computed(() => store.state.down.downMusic)
const songsList: any = ref([])
songsList.value = dwnMusic.value
const togList = () => {
  isTog.value = false
  songsList.value = dwnMusic.value
}
const togAnchor = () => {
  isTog.value = true
  songsList.value = [...defaultMusic, ...dwnMusic.value]
}
const hanelDbPlay = () => {
  store.commit('music/updateMusicList', songsList.value)
}
</script>

<style scoped lang="less">
.my-music {
  width: 98%;
  margin: 0 auto;
  padding: 15px 20px 5px;
}
.songstable {
  width: 100%;
  position: relative;
  padding-top: 44px;
  .find {
    position: absolute;
    top: 20px;
    right: 0;
  }
}
.news-tog {
  width: 100%;
  display: flex;
  justify-content: center;

  > div {
    border: 1px solid skyblue;
    border-radius: 26px;
  }
  .active {
    background: skyblue;
    color: #f5f5f7;
  }
  .el-button {
    border: none;
  }
  .el-button + .el-button {
    margin-left: 0;
  }
}
</style>
